<template>
    <div class="platform">
        <my-tag title="个人中心" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="机构名称" prop="organizationName">{{ form.organizationName }}</el-form-item>
                    <el-form-item label="授权手机号" prop="contactInformation">{{ form.contactInformation }}</el-form-item>
                    <el-form-item label="联系电话" prop="phonenumber">{{ form.phonenumber || '暂无' }}</el-form-item>
                    <el-form-item label="机构地址" prop="address">{{ form.address || '暂无' }}</el-form-item>
                    <el-form-item label="机构简介" prop="organizationDesc">{{ form.organizationDesc || '暂无' }}</el-form-item>
                    <el-form-item label="成立时间" prop="foundingYears">{{ parseTime(form.foundingYears, "{y}-{m}-{d}")
                    }}</el-form-item>
                </div>
                <div class="form-right">
                    <el-form-item label="机构logo" prop="headerImg">
                        <image-preview :src="form.headerImg" width="100px" height="100px"
                            :preview-src-list="[form.headerImg]"></image-preview>
                    </el-form-item>
                    <el-form-item label="机构形象照" prop="coverImageUrl">
                        <image-preview :src="form.coverImageUrl" width="100px" height="100px"
                            :preview-src-list="[form.coverImageUrl]"></image-preview>
                    </el-form-item>
                    <el-form-item label="营业执照" prop="businessLicenseImg">
                        <image-preview v-for="v in form.businessLicenseImg" :key="v.ossId" :src="v.url" width="100px"
                            height="100px" :preview-src-list="[v.url]" style="margin-right:10px;"></image-preview>
                    </el-form-item>
                    <el-form-item label="机构荣誉" prop="honersImage">
                        <image-preview v-for="v in form.honersImage" :key="v.ossId" :src="v.url" width="100px"
                            height="100px" :preview-src-list="[v.url]"
                            style="margin-right:10px;margin-bottom: 10px;"></image-preview>
                    </el-form-item>
                    <el-form-item label="修改记录" prop="updateRecords">
                        <el-button type="primary" size="small" @click="openDialog(form.updateRecords)">查看记录</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <el-dialog title="修改记录" v-model="open" width="700px" append-to-body center>
            <el-table :data="historyListData" style="width: 100%" max-height="400">
                <el-table-column prop="updateTime" align="center" :show-overflow-tooltip="true" label="编辑时间" />
                <el-table-column prop="organizationStatus" align="center" :show-overflow-tooltip="true" label="状态">
                    <template #default="scope">
                        <dict-tag :options="organization_status" :value="scope.row.organizationStatus" />
                    </template>
                </el-table-column>
                <el-table-column prop="remark" align="center" :show-overflow-tooltip="true" label="备注" />
                <el-table-column align="center" :show-overflow-tooltip="true" label="操作">
                    <template #default="scope">
                        <el-button link type="default" icon="View" size="small"
                            @click="handelDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">关 闭</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog title="修改详情" v-model="openDetail" width="800px" append-to-body center>
            <el-form :model="openDetailForm" label-position="left" label-width="auto">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构名称" prop="organizationName">{{ openDetailForm.organizationName
                        }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="授权手机号" prop="contactInformation">{{ openDetailForm.contactInformation
                        }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机构地址" prop="address">{{ openDetailForm.address }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phonenumber">{{ openDetailForm.phonenumber }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="成立时间" prop="foundingYears">{{ parseTime(openDetailForm.foundingYears,
                            "{y}-{m}-{d}") }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核状态" prop="organizationStatus">
                            <dict-tag :options="organization_status" :value="openDetailForm.organizationStatus" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">{{ openDetailForm.remark }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="机构简介" prop="organizationDesc">{{ openDetailForm.organizationDesc }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机构logo" prop="headerImg">
                            <image-preview :src="openDetailForm.headerImg" :limit="1" width="100px" height="100px"
                                :preview-src-list="[openDetailForm.headerImg]"></image-preview>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机构形象照" prop="coverImageUrl">
                            <image-preview :src="openDetailForm.coverImageUrl" :limit="1" width="100px" height="100px"
                                :preview-src-list="[openDetailForm.coverImageUrl]"></image-preview>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="营业执照" prop="businessLicenseImg">
                            <image-preview v-for="v in openDetailForm.businessLicenseImg" :key="v.ossId" :src="v.url"
                                width="100px" height="100px" :preview-src-list="[v.url]"
                                style="margin-right:10px;"></image-preview>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机构荣誉" prop="honersImage">
                            <image-preview v-for="v in openDetailForm.honersImage" :key="v.ossId" :src="v.url" width="100px"
                                height="100px" :preview-src-list="[v.url]"
                                style="margin-right:10px;margin-bottom: 10px;"></image-preview>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="openDetail = false">关 闭</el-button>
                </div>
            </template>
        </el-dialog>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="editInfo">修改</el-button>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/api/decor/designer";
import { getAuthenticationAgency } from "@/api/decor/designAgency";
const { proxy } = getCurrentInstance();
const router = useRouter();
const { organization_status } = proxy.useDict('organization_status');
let open = ref(false)
let openDetail = ref(false)
let historyListData = ref([])
const data = reactive({
    form: {},
    openDetailForm: {},
});
const { form, openDetailForm } = toRefs(data);
const getAgencyInfo = () => {
    getAuthenticationAgency().then((res) => {
        let agencyData = res;
        agencyData.headerImg = ''; //头像
        agencyData.coverImageUrl = ''; // 形象照
        agencyData.honersImage = '';  //荣誉证书
        agencyData.businessLicenseImg = '';  // 营业执照
        let imgUrlPromises = [];
        // 获取头像的异步操作
        if (agencyData.avatar) {
            let avatarPromise = getImgUrl(agencyData.avatar).then((res) => {
                agencyData.headerImg = res.data[0].url;
            });
            imgUrlPromises.push(avatarPromise);
        }
        // 获取形象照的异步操作
        if (agencyData.profilePicture) {
            let coverImagePromise = getImgUrl(agencyData.profilePicture).then((res) => {
                agencyData.coverImageUrl = res.data[0].url;
            });
            imgUrlPromises.push(coverImagePromise);
        }
        // 营业执照异步操作
        if (agencyData.businessLicense) {
            let businessLicensePromise = getImgUrl(agencyData.businessLicense).then((res) => {
                agencyData.businessLicenseImg = res.data;
            });
            imgUrlPromises.push(businessLicensePromise);
        }
        // 获取荣誉证书
        if (agencyData.honors) {
            let honersImages = getImgUrl(agencyData.honors).then((res) => {
                agencyData.honersImage = res.data;
            });
            imgUrlPromises.push(honersImages);
        }
        Promise.all(imgUrlPromises).then(() => {
            form.value = agencyData;
        });
    })
}
// 编辑记录
const openDialog = (value) => {
    open.value = true
    historyListData.value = value

}
const handelDetail = (row) => {
    openDetail.value = true
    let agencyData = row;
    agencyData.headerImg = ''; //头像
    agencyData.coverImageUrl = ''; // 形象照
    agencyData.honersImage = '';  //荣誉证书
    agencyData.businessLicenseImg = '';  // 营业执照
    let imgUrlPromises = [];
    // 获取头像的异步操作
    if (agencyData.avatar) {
        let avatarPromise = getImgUrl(agencyData.avatar).then((res) => {
            agencyData.headerImg = res.data[0].url;
        });
        imgUrlPromises.push(avatarPromise);
    }
    // 获取形象照的异步操作
    if (agencyData.profilePicture) {
        let coverImagePromise = getImgUrl(agencyData.profilePicture).then((res) => {
            agencyData.coverImageUrl = res.data[0].url;
        });
        imgUrlPromises.push(coverImagePromise);
    }
    // 营业执照异步操作
    if (agencyData.businessLicense) {
        let businessLicensePromise = getImgUrl(agencyData.businessLicense).then((res) => {
            agencyData.businessLicenseImg = res.data;
        });
        imgUrlPromises.push(businessLicensePromise);
    }
    // 获取荣誉证书
    if (agencyData.honors) {
        let honersImages = getImgUrl(agencyData.honors).then((res) => {
            agencyData.honersImage = res.data;
        });
        imgUrlPromises.push(honersImages);
    }
    Promise.all(imgUrlPromises).then(() => {
        openDetailForm.value = agencyData;
    });
}
const cancel = () => {
    open.value = false
}
getAgencyInfo()
// 修改按钮
const editInfo = () => {
    let updateRecords = form.value.updateRecords ? form.value.updateRecords : []
    if (updateRecords.length != 0 && updateRecords[0].organizationStatus === 0) {
        proxy.$modal.msgError('请等待管理员审核后再进行修改')
    } else {
        router.push('/designAgency/editDesignAgency/' + 'editDesignAgencyInfo')
    }

}
</script>